<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
  #paper {
    position: relative;
    width: 600px;
    height: 400px;
  }
  </style>
</head>
<body>
  <div id="paper">
    <canvas width="800" height="600"></canvas>
  </div>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
  <script src="/js/sprite-core.js"></script>
  <script>
  (function () {
    const Sprite = spritejs.Sprite,
      Path = spritejs.Path,
      Label = spritejs.Label,
      Layer = spritejs.Layer;
    const context = document.querySelector('#paper canvas').getContext('2d');
    const layer = new Layer({
      context,
      renderMode: 'repaintDirty',
    });

    // console.log('box', s3.renderBox)

    // s.on('touchstart', e => {
    //   console.log('in origin box', e.offsetX, e.offsetY);
    //   e.stopDispatch()
    // })

    // layer.on('update', e => {
    //   console.log(e.currentTime)
    // })

    // s.on('update', e => {
    //   console.log('update')
    // })

    // const s1 = new Sprite({
    //   attributeChangedCallback(...args) {
    //     //console.log(args)
    //   }
    // })

    // s1.attr({
    //   anchor: [0.5, 0.5],
    //   pos: [100, 100],
    //   size: [50, 50],
    //   bgcolor: 'green',
    //   opacity: 0.5,
    //   transform: {
    //     translate: [30, 30],
    //     rotate: 45,
    //   },
    //   zIndex: 201,
    // })

    // layer.appendChild(s1)

    // s1.on('click', function(evt){
    //   console.log(evt)
    // })

    const s2 = new Sprite();

    s2.attr({
      anchor: [0.5, 0.5],
      pos: [100, 100],
      size: [50, 50],
      // bgcolor: 'red',
      opacity: 1,
      zIndex: 101,
      // transform: {
      //   //skew: [30, 0],
      //   translate: [30, 30],
      //   rotate: 45,
      // },
      transform: 'translate(30,30) rotate(45)',
      bgcolor: {
        direction: 135,
        colors: [{
          offset: 0,
          color: 'red',
        }, {
          offset: 1,
          color: 'green',
        }],
      },
      border: [5, {
        direction: 135,
        colors: [{
          offset: 0,
          color: '#37c',
        }, {
          offset: 1,
          color: '#c73',
        }],
      }],
    });

    window.s2 = s2;

    const s3 = new Sprite();

    s3.attr({
      anchor: [0.5, 0.5],
      pos: [130, 130],
      size: [50, 50],
      bgcolor: 'red',
      border: [15, 'blue'],
      opacity: 0.5,
      zIndex: 500,
    });


    layer.append(s2, s3);

    window.s3 = s3;

    s2.on('click', (e) => {
      console.log(111);
    });

    const s4 = new Path();

    s4.attr({
      anchor: [0, 0],
      pos: [300, 100],
      // size: [200, 200],
      bgcolor: '#ddd',
      // renderMode: 'fill',
      lineWidth: 10,
      // border: [10, 'black'],
      lineCap: 'round',
      d: 'M10,80 q100,120 120,20 q140,-50 160,0',
      // d: 'M10 80 h260 v206 h-260Z',
      strokeColor: {
        // direction: 45,
        // rect: [0, 0, 100, 100],
        vector: [10, 50, 290, 200],
        colors: [{
          offset: 0,
          color: 'rgba(255,0,0,10)',
        }, {
          offset: 1,
          color: 'rgba(255,0,0,0)',
        }],
      },
    });
  
    layer.append(s4);
    window.s4 = s4;

    const ss4 = s4.cloneNode();
    ss4.attr({
      lineWidth: 1,
      strokeColor: 'blue',
      bgcolor: 'transparent',
    });
    layer.append(ss4);

    const s = new Sprite();

    s.attr({
      anchor: [0.5, 0.5],
      pos: [300, 100],
      bgcolor: 'red',
      gradients: {
        bgcolor: {
          vector: [0, 0, 80, 80],
          colors: [{
            offset: 0,
            color: 'red',
          }, {
            offset: 1,
            color: 'green',
          }],
        },
      },
      size: [80, 50],
      // bgcolor: 'green',
      // opacity: 0.5,
      transform: {
        // translate: [30, 30],
        // rotate: 30,
        scale: [0.5, 0.5],
      },
      offsetPath: 'M10,80 q100,120 120,20 q140,-50 160,0',
      // offsetDistance: 0.5,
      // offsetRotate: 30,
      zIndex: 200,
    });

    layer.appendChild(s);

    s.animate([
      {offsetDistance: 0},
      {offsetDistance: 1},
    ], {
      duration: 3000,
      direction: 'alternate',
      iterations: Infinity,
    });

    s.animate([
      {scale: [0.5, 0.5], offsetRotate: 'auto'},
      {scale: [0.5, -0.5], offsetRotate: 'reverse'},
      {scale: [0.5, 0.5], offsetRotate: 'auto'},
    ], {
      duration: 6000,
      iterations: Infinity,
      easing: 'step-end',
    });

    window.s = s;

    const a1 = new Animator(1000, (p) => {
      const colors = [
        {offset: 0, color: 'rgba(255,0,0,0)'},
        {offset: p, color: 'rgba(255,0,0,1)'},
        {offset: p, color: 'rgba(255,0,0,0)'},
      ];

      const strokeColor = s4.attr('strokeColor');
      strokeColor.colors = colors;
      s4.attr({strokeColor});
    });

    a1.animate();


    const label = new Label('Hello World!\n你好，世界！');
  
    label.attr({
      anchor: [0.5, 0.5],
      pos: [300, 150],
      zIndex: 1000,
      font: '36px Arial',
      border: [10, 'blue'],
      opacity: 0.3,
      transformOrigin: [0, 100],
      // bgcolor: 'red',
      rotate: 100,
      fillColor: {
        direction: 135,
        colors: [{
          offset: 0,
          color: 'red',
        }, {
          offset: 1,
          color: 'green',
        }],
      },
    });

    layer.append(label);

    label.animate([
      {rotate: 0},
      {rotate: 360},
    ], {
      duration: 10000,
      iterations: Infinity,
    });

    s.on('update', (evt) => {
      // console.log(label.renderRect)
      if(s.OBBCollision(label)) {
        label.attr('opacity', 0.7);
      } else {
        label.attr('opacity', 0.3);
      }
    });
  }());
  </script>
</body>
</html>